<template>
  <div id="window" class="flex-column">
    <div id="titlebar" class="title flex-item-0">
      这是标题栏
    </div>
    <div class="ui divider" style="margin: 5px 0px;"></div>
    <div id="msgList" class="flex-item-1">
      <div class="ui list">
        <div class="item" v-for="msg in messages">
          <img class="ui w50 round image" src="http://www.semantic-ui.cn/images/avatar2/small/rachel.png">
          <div class="content">
            <a class="header" style="color: #dff0ff;">{{msg.sender}}</a>
            <div class="description" style="color: #cdcdcd;">{{msg.msg}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui divider" style="margin: 5px 0px;"></div>
    <div id="toolBox" class="flex-item-0">
      <div class="ui horizontal list">
        <div class="item">
          <i class="icon big smile "></i>
        </div>
        <div class="item">
          <i class="icon big cut "></i>
        </div>
        <div class="item">
          <i class="icon big file "></i>
        </div>
      </div>
    </div>
    <div id="inputBox" class="flex-item-0">
      <div class="ui big input" style="width: 100%; height: 100%;">
        <textarea id="msg" type="text" placeholder="输入内容" style=""></textarea>
      </div>
    </div>
    <div id="submitBox" class="ui grid flex-item-0">
      <div class="two column row">
        <div class="right floated column" style="text-align: right;">
          <span style="margin-right: 20px;">按下Ctr+Enter 换行</span>
          <div class="ui big primary button">
            发送
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        messages: [
          {
            icon: '',
            sender: 'Andrewlu',
            msg: '你好呀.........'
          },
          {
            icon: '',
            sender: 'Andrewlu',
            msg: '你好呀.........'
          },
          {
            icon: '',
            sender: 'Andrewlu',
            msg: '你好呀.........'
          },
          {
            icon: '',
            sender: 'Andrewlu',
            msg: '你好呀.........'
          }
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #window {
    height: 100%;
  }

  #titlebar {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 1.4rem;
    margin: 0 auto;
    line-height: 50px;
  }

  #msgList {
    background-color: transparent;
    height: 80%;
    justify-content: center;
    align-items: center;
  }

  #toolBox > .list > .item {
    margin: 5px 10px !important;
    color: #888888;
  }

  #inputBox {
    height: 120px;
  }

  #inputBox #msg {
    resize: none;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
  }

  #submitBox {
    height: auto;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
  }
</style>
